<template>
    <div id="line-area-two" ref="canvas" class="canvas-pie" :style="{width: '100%', height: canHeight + 'px'}"></div>
</template>
<script setup lang="ts">
import { defineProps, computed, onMounted } from 'vue'
// import { createPinia } from 'pinia'
import * as echarts from 'echarts/core';
import { GridComponent, type GridComponentOption,
    MarkPointComponent,
    type MarkPointComponentOption } from 'echarts/components';
import { LineChart, type LineSeriesOption } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
// import { useChartsStore } from '@/stores/charts';
// const pinia = createPinia();
// const chartStore = useChartsStore(pinia)

echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition,MarkPointComponent]);

type EChartsOption = echarts.ComposeOption<
  GridComponentOption | LineSeriesOption | MarkPointComponentOption
>;
const props = defineProps({
    canvasHeight: {
        type:Number,
        default: 300
    },
    data: {
        type: Object,
        default: () => { } 
    }
})
let canHeight = computed(() => { return props.canvasHeight })
onMounted(() => {
    var chartDom = document.getElementById('line-area-two')!;
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;
    const obj = {
        type: 'line',
        smooth: true,
        areaStyle: { color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: '#f0f23e' // 0% 处的颜色
            }, {
                offset: 1, color: '#fefeec' // 100% 处的颜色
            }],
            global: false
        } },
        // markPoint: {
        //     label: { color: '#000000' },
        //     data: [ { type: 'max'}, { type: 'min'} ],
        //     itemStyle: { color: '#f0f23e' },
        // }
    }

    option = {
        legend: {
            show: true,
            itemStyle: { color: '#f0f23e' },
        },
        grid: {
            top: 60,
            left: 0,
            right: '2%',
            bottom: 0,
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: props.data.xAxisDataList,
            
        },
        yAxis: {
            type: 'value',
            splitLine:{show:true, lineStyle:{color: '#5e6056'}},
        },
        series: props.data.seriesDataList.map(m => {
            return {...m, ...obj}
        })
    };

    option && myChart.setOption(option);
})
</script>

<style scope>
</style>
